import React from 'react';
import { message } from 'antd';
import { API_HOST } from 'Constants/config';
import './index.scss';

const $ = require('jquery');
let isInitFinished = false;//视频插件是否加载完成
class TestPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state= {
      swfobj: undefined,
      jsession: sessionStorage.getItem('jsession') || '',
      vehicles: []
    };

    this.initLogin = ::this.initLogin;
    this.initVideoPlugin = ::this.initVideoPlugin;
    this.initFlash = ::this.initFlash;
    this.playVideo = ::this.playVideo;
    this.initList = ::this.initList;
  }
  componentDidMount() {
    this.initLogin();
    this.initList();
  }
  //init car list
  initList() {
    $.ajax({
      type: 'GET',
      url: `http://211.162.125.99:8080/StandardApiAction_queryUserVehicle.action?jsession=${this.state.jsession}`,
      cache: false,
      dataType: 'JSONP',
      jsonp: 'callback',
      success: (res) => {
        if(res.result === 0) {
          message.success('获取车辆列表成功');
          this.setState({
            vehicles: res.vehicles
          })
        }
        console.log(res);
      }
    });
  }
  //init login
  initLogin() {
    $.ajax({
      type:'POST',
      url: 'http://211.162.125.99:8080/StandardApiAction_loginEx.action',
      data: {
        account: 'zjxh',
        password: '000000'
      },
      cache:false,
      dataType:'JSONP',
      jsonp: 'callback',
      success: (res) => {
        if(res.result === 0) {
          message.success('登入无人机成功');
          sessionStorage.setItem('jsession', res.jsession);
          this.setState({
            jsession: res.jsession
          });
          this.initVideoPlugin();
        } else {
          message.error('登入无人机失败');
        }
      },
    });
  }
  //初始化视频插件
  initVideoPlugin() {
    //视频插件初始化参数
    const params = {
      allowFullscreen: "true",
      allowScriptAccess: "always",
      bgcolor: "#cc3b2c",
      wmode: "transparent"
    };
    //初始化flash
    const self = this;
    swfobject.embedSWF("static/player.swf", "cmsv6flash", 400, 400, "11.0.0", null, null, params, null, function (e) {

      window.player = e.ref;
      setTimeout(() => { self.initFlash();}, 5000);
    });

  }
  initFlash() {
    const self = this;
    if (window.player === null || !window.player.setWindowNum ) {
      setTimeout(() => { self.initFlash();}, 5000);
      message.warn('初始化flash失败');
    } else {
      //设置视频插件的语言
      window.player.setLanguage("http://211.162.125.99:8080/808gps/open/player/cn.xml");
      //先将全部窗口创建好
      window.player.setWindowNum(36);
      //再配置当前的窗口数目
      window.player.setWindowNum(1);
      //设置视频插件的服务器
      window.player.setServerInfo("211.162.125.99", "6605");
      isInitFinished = true;
      message.success('初始化flash成功');
    }
  }
  playVideo(deId) {
    console.log('enter');
    if(isInitFinished) {
      console.log('test');
      // stop
      window.player.stopVideo(0);
      // window title
      window.player.setVideoInfo(0, `测试车辆设备${deId}实时视频`);
      //play
      window.player.startVideo(0, this.state.jsession, deId, 0, 1, true);
      // buffer
      window.player.setBufferTime(0, 2);
    }
  }
  handleDevice(id) {
    if(isInitFinished) {
      this.playVideo(id);
    } else {
      message.warn('flash初始化后查看视频');
    }
  }
  render() {
    console.log(this.state.vehicles);
    return (
      <div>
        <div style={{ width: '100%', height: 400, backgroundColor: '#cccccc'}}>
          <div id="cmsv6flash" />
        </div>
        <div>
          {
            this.state.vehicles.length > 0 ?
              this.state.vehicles.map(item => (
                <div style={{ color: '#ffffff' }}>设备号：{item.dl.map(de => <div onClick={this.handleDevice.bind(this, de.id)}>{de.id}</div>)}</div>
              )): ''
          }
        </div>
      </div>
    );
  }
}

export default TestPage;
